<template>
  <div class="content">
    <div class="_info">
      <img src="../assets/bg1.png" class="bg" alt />
      <img src="../assets/bgName.png" class="bgName" alt />
      <div class="info">
        <div class="item">
          <div class="label">授权人</div>
          <div class="val">{{name}}</div>
        </div>
        <div class="item">
          <div class="label">手机号码</div>
          <div class="val">{{mobile_phone | mPhone}}</div>
        </div>
        <div class="item">
          <div class="label">授权场景</div>
          <div class="val val2">通过我的南京APP刷码乘车，上车后自动通过钱包绑定银行卡扣取车费。单次限额50元，单日总限额100元。</div>
        </div>
      </div>
      <div class="info info2" @click="bankcard()">
        <div class="item">
          <div class="label">扣款卡信息</div>
          <div class="val">{{bankCard | bank}}</div>
          <van-icon name="arrow" />
          <!-- <div class="val val2">
            与钱包里展示顺序同步
            <van-icon name="arrow" class="but1" />
          </div> -->
        </div>
      </div>
      <div class="detail" >                           </div>
    </div>
    <div class="foot">
      <div>
        <van-checkbox v-model="checked" @click="showText">
          授权并同意
          <span>《免密支付协议》</span>
        </van-checkbox>
      </div>
      <van-button block class="btn" @click="showPopup()">开通免密支付</van-button>

      <van-overlay :show="show" :lock-scroll="false">
        <div class="wrapper">
          <div class="block">
            <van-icon name="clear" class="close" @click="show=false" />
            <div class="title">
              <b>免密支付协议</b>
            </div>
            <div class="detail" style="text-indent:2em">
              <p>本服务协议（以下简称“本协议”）是南京大数据集团有限公司（以下简称“南京大数据集团”）与我的南京APP用户（以下简称“用户”或“您”)就免密支付服务的使用等相关事项所订立的有效合约。用户通过网络页面点击确认或以其他方式选择接受本协议，即表示用户与南京大数据集团已达成协议并同意接受本协议的全部约定内容。在接受本协议之前，请您仔细阅读本协议的全部内容。如果您不同意本协议的任意内容，或者无法准确理解南京大数据集团对条款的解释，请不要进行后续操作。</p>
              <!-- <br />本隐私协议将帮助您了解以下内容:
                <br />1.我们如何收集和使用您的信息
              <br />2.我们如何保存您的信息我的南京仅会出于本授权协议所述的以下目的，收集和使用您的个人信息:-->

              <p>
                <b>第一条 定义</b>
                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的南京免密支付服务，是指我的南京APP根据您的授权，执行您委托的第三方网站或应用（以下简称“第三方”）向我的南京APP发起的扣款指令，在我的南京APP侧无需您手动确认自动扣款，从而为您提供的支付服务。（以下简称“本服务”）。
              </p>
              <p>
                <b>第二条 双方权利义务</b>
                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（一）您确认在使用本服务的意思表示出自您的真实意愿，即您愿意通过免密支付方式向第三方支付消费金额；同时您对使用本服务过程中发出的指令的真实性及有效性承担全部责任，该指令视为您的真实意思表示且不可变更或撤销。您承诺，南京大数据集团依照您的指令进行操作的一切风险均由您承担。
              </p>
              <p>（二）您同意承诺不会利用本服务从事任何非法的或违反本协议目的或者侵犯其他第三方权益的行为，否则南京大数据集团有权立即单方面终止提供本服务，并不承担任何责任；如果因您的行为给南京大数据集团造成损失的，您应承担全部赔偿责任。</p>
              <p>（三）您授权南京大数据集团根据《我的南京APP乘车码用户隐私协议》使用您在本服务期间所形成的相关信息数据。</p>
              <p>（四）您理解并同意，南京大数据集团在接到您在与南京大数据集团合作的第三方发起的免密支付指令后，即视为您授权南京大数据集团从您自行选定的银行卡中扣取指定款项，并支付至第三方的指定账户，该授权系您的真实意思表示。</p>
              <p>（五）您理解并同意，使用本服务时您的我的南京APP账户必须已经绑定手机、实名认证且至少绑定一张支持在线支付的合法、有效银行卡，若没有满足条件，则须在签订本协议之后按照页面提示进行处理，否则无法使用本服务。</p>
              <p>（六） 您同意，即使您在签订本协议时并未绑定或并未开通在线支付的银行卡，后续您在向南京大数据集团发起免密支付指令时已经绑定并开通在线支付功能的，南京大数据集团有权将该银行卡作为您的扣款卡。</p>
              <p>（七）您理解并同意，南京大数据集团只是被授权指令的执行方，对第三方向南京大数据集团发出的指令的真实性和准确性不负有审查义务。除非南京大数据集团没有依照第三方的指令进行操作，或操作指令错误，否则南京大数据集团不对本服务产生的损失和责任负责。该等损失与责任应由您与第三方协商解决。</p>
              <p>（九）您理解并同意，基于风险的防范与控制，南京大数据集团会对不同第三方的免密支付额度作出不同的控制，日免密支付额度及日免密支付次数均以南京大数据集团与您所在的网站向您具体公告的为准。若超过该限额的话，将会扣款失败，无法完成支付。</p>
              <p>（十）除本协议另有规定外，南京大数据集团在提前邮件通知您或在网站公告的情况下，可以单方面终止向您提供本服务，并不承担任何赔偿责任。南京大数据集团在终止提供本服务后，若发现您之前存在违法或违反本协议目的的使用行为，给南京大数据集团造成损失的，则南京大数据集团仍可据此要求您承担相应赔偿责任并保留通过司法途径予以解决的权利。</p>
              <p>
                <b>第三条 其他</b>
                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（一）南京大数据集团将有权随时修改本协议的有关条款，一旦相关内容发生变动，南京大数据集团公司将会通过电子邮件或网站公告等方式向您提示修改内容。
              </p>
              <p>（二）如您不同意上述条款和条件，您应立即停止使用本项服务，否则视为您完全同意上述条款内容，包括南京大数据集团不时对其的更新、修订。</p>
              <p>（三）其他未尽事宜，将适用《我的南京用户协议》相关约定。</p>
            </div>
            <van-button block type="info" @click="show=false;checked=true;">我已阅读并同意</van-button>
          </div>
        </div>
      </van-overlay>
      <!-- <van-button block class="btn" @click="showPopup">开通免密支付</van-button> -->
      <!-- <van-popup class="popup" v-model="show" round position="bottom" :style="{ height: '72%' }">
        <div class="popuptitle">请输入支付密码</div>

        <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true" />
        <div class="popuptext">请输入钱包支付密码进行身份验证</div>

        <van-number-keyboard
          v-model="value"
          :show="showKeyboard"
          title="键盘标题"
          close-button-text="确认"
          title-left="1111"
          maxlength="6"
          theme="custom"
          @blur="showKeyboard = false"
          @input="onInput"
          @delete="onDelete"
          :hide-on-click-outside="false"
          @hide="postregister()"
        />
      </van-popup>-->
    </div>
  </div>
</template>

<script>
import { register } from "../api";
export default {
  data() {
    return {
      checked: false,
      show: false,
      value: "",
      showKeyboard: true,
      errorInfo: "",
      name: localStorage.getItem("name"),
      mobile_phone: localStorage.getItem("mobile_phone"),
      bankCard: localStorage.getItem("bankCard")
    };
  },
  created: function() {},
  filters: {
    mPhone: function(value) {
      if (!value) return "";
      return value.replace(value.substr(3, 4), "****");
    },
     bank: function(value) {
      if (!value) return "";
      return value.replace(value.substr(3, 12), "******");
    }
  },
  methods: {
    showPopup() {
      localStorage.setItem("pp","1")
      if (this.checked == true) {
        //获取当前时间戳
        let data = Date.parse(new Date());
        let pos = "Mch2020101916204404637";
        let serialNo = `${pos}${data}`;
        window.location.href = `https://wallet.pay.nj.gov.cn:8085/wallet/index.html#/thirdParty/checkPwd?serialNo=${serialNo}&redirect=https://m.mynj.cn:11100/metrocode/dist/#/busword`;
      } else {
        // https://m.mynj.cn:11100/metrocode/dist/#/busword
      }
    },
    onInput(value) {
      console.log(value + ":eeeeeeeeeee");
    },
    onDelete() {
      console.log("删除");
    },
    go() {
      history.go(-1);
    },
    showText() {
      if (this.checked == true) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    bankcard() {
      window.location.href = "https://wallet.pay.nj.gov.cn:8085/wallet/index.html#/personal/myBanks"
    }
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== "123456") {
        this.errorInfo = "密码错误";
        console.log("密码错误");
      } else {
        console.log("wwww");
        this.errorInfo = "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  font-family: PingFangSC-Medium, PingFang SC;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: calc(100vw - 32px);
      border-radius: 10px;
      height: calc(100vh - 60px);
      background-color: #fff;
      padding: 0 17px;
      box-sizing: border-box;
      position: relative;
      .close {
        position: absolute;
        font-size: 24px;
        color: #999;
        top: 10px;
        right: 10px;
      }
      .title {
        font-weight: 500;
        color: #333;
        font-size: 16px;
        margin-top: 36px;
        text-align: center;
      }
      .detail {
        height: calc(100% - 130px);
        margin-top: 10px;
        overflow: auto;
        & > div {
          text-indent: 2em;
          font-size: 12px;
          font-weight: 400;
          line-height: 23px;
          color: #333;
          &.b {
            text-indent: 0;
            font-weight: 500;
          }
        }
      }
      button {
        margin: 10px 0;
        span {
          color: #fff;
        }
      }
    }
  }
  ._info {
    background: linear-gradient(137deg, #318bff 0%, #1876ff 100%);
    background-size: 100%;
    padding: 155px 16px 0 16px;
    position: relative;
    & > img {
      position: absolute;
      &.bg {
        top: 29px;
        left: 0;
        width: calc(100% - 17px);
      }
      &.bgName {
        width: 168px;
        top: 27px;
        left: 104px;
      }
    }
    .info {
      background: #fff;
      box-shadow: 0px 2px 7px 0px rgba(192, 216, 255, 0.29);
      border-radius: 6px;
      border: 1px solid #f2f3f5;
      padding: 14px 17px;
      position: relative;
      height: 168px;
      &.info2 {
        height: 30px;
        margin-top: 15px;
        .val2 {
          display: flex;
          justify-content: flex-end;
          i {
            color: #1e1e1e;
            font-size: 16px;
            margin-top: 7px;
          }
        }
      }
      .item {
        display: flex;
        font-size: 14px;
        height: 40px;
        line-height: 30px;
        .label {
          width: 80px;
          font-weight: 500;
          color: #333333;
          font-family: PingFangSC-Regular, PingFang SC;
        }
        .val {
          width: calc(100% - 80px);
          font-weight: 400;
          color: #666666;
          font-family: PingFangSC-Regular, PingFang SC;
        }
        i {
          margin-top: 8px;
          color: #333333;
        }
      }
    }
    .detail {
      padding: 25px 0 20px 0;
      font-size: 12px;
      font-weight: 500;
      color: #fff;
    }
  }
  .foot {
    margin-top: 34px;
    padding: 0 16px;
    & > div {
      margin-bottom: 15px;
      font-size: 12px;
      font-weight: 400;
      color: #666;
      span {
        color: #4d6cff;
      }
    }
    .btn {
      background: linear-gradient(137deg, #318bff 0%, #1876ff 100%);
      border-radius: 5px;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }
    .popup {
      margin-bottom: 0;
      .popuptitle {
        margin: 25px 0;
        color: #333333;
        font-size: 18px;
        text-align: center;
        font-weight: bold;
      }
      .popuptext {
        margin: 0 0 45px 0;
        color: #999999;
        font-size: 15px;
        text-align: center;
      }
    }
  }
}
</style>